import './welcomeOptionItem.scss'
import { getSuffixIcon, downFile, getVideoImage,  initMaterialData } from '@/utils/utils'


const downLoad = (url: any, name?: any) => {
  downFile(url, name)
}

export const renderWelcomeData = (val: any) => {
  
  return <div>
    <div>
      <el-tooltip popper-class="auto_height auto_width" content={val?.welcome_text} trigger="hover" placement="top-start" effect="light">
        <div class="zw-text-ellipsis2">{ val?.welcome_text }</div>
      </el-tooltip>
    </div>
    <div class="list-accessory-box">
      {
        val.welcome_material && val.welcome_material.map((item: any, key: any) => {
          if(item.type === 1) {
            return (
              <el-image class="wel_content_file_item" src={item.absolute_url} preview-src-list={[item.absolute_url]} preview-teleported={true} initial-index={1} style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px">
                {{
                  error: () => <img style="width: 40px; height: 40px" src="/static/file/pic.png" alt="" />
                }}
              </el-image>
            )
          }else if(item.type === 2) {
            return (
              <div class="pay-item">
                <div class="play"></div>
                <el-image class="wel_content_file_item" src={getVideoImage(item.absolute_url, 50, 50) || '/static/file/pic.png'} style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px">
                  {{
                    error: () => <img style="width: 40px; height: 40px" src="/static/file/mov.png" alt="" />
                  }}
                </el-image>
              </div>
            )
          } else if (item.type === 3) {
            return (
              <div class="inlineblock" >
                <img class="wel_content_file_item" src="/static/file/link.png" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
              </div>
            )
          } else if (item.type === 4) {
            return (
              <div class="inlineblock" >
                <img class="wel_content_file_item" src="/static/file/mp3.png" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
              </div>
            )
          } else if (item.type === 5) {
            return (
              <div class="inlineblock" >
                <img class="wel_content_file_item" src={getSuffixIcon(item.name)} style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
              </div>
            )
          } else if (item.type === 7) {
            const errorSlot = () => (
              <div class="image-slot">
                <el-image src='/static/file/shop.png'></el-image>
              </div>
            )
            return (
              <el-image style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" vSlots={{error:errorSlot}} src={item.link_share_image}>
              </el-image>
            )
          } else if (item.type === 8) {
            return (
              <div class="inlineblock" >
                {item.type === 8 && <img v-show={item.link_share_image} class="wel_content_file_item" src={item.link_share_image} style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />}
                {item.type === 8 && <img v-show={!item.link_share_image} class="wel_content_file_item" src="/static/file/shop.png" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />}
              </div>
            )
          } else if (item.type === 9) {
            return (
              <div class="inlineblock" >
                { 
                  item.link_share_imag ? 
                    <img class="wel_content_file_item" src={item.link_share_imag} style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
                  : <img class="wel_content_file_item" src="/static/file/form.png" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
                }
              </div>
            )
          } else if (item.type === 10) {
            return (
              <div class="inlineblock" >
                <img class="wel_content_file_item" src="/static/file/official.png" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
              </div>
            )
          } else if (item.type === 11) {
            return (
              <div class="inlineblock">
                <el-image class="wel_content_file_item" preview-src-list={[item.absolute_url]} preview-teleported={true} src={(item.absolute_url) || '/static/file/pic.png'} style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px">
                  {{
                    error: () => <img style="width: 40px; height: 40px" src="/static/file/miniApp.png" alt="" />
                  }}
                </el-image>
              </div>
            )
          }
        })
      }
    </div>
  </div>
}
